<template>
    <div>
      <van-row>
        <van-nav-bar
            title="地址编辑"
            fixed
            placeholder
            left-text="返回"
            @click-left="onCancel"
        >
          <template #left>
            <van-icon   color="black" size="22" name="arrow-left" />
          </template>
        </van-nav-bar>
        <van-col span="24">
          <van-address-edit
              :area-list="areaList"
              show-postal
              show-delete
              show-set-default
              show-search-result
              :search-result="searchResult"
              :area-columns-placeholder="['请选择', '请选择', '请选择']"
              @save="onSave"
              @delete="onDelete"
              @change-detail="onChangeDetail"
          />
        </van-col>
      </van-row>
    </div>
</template>

<script>
import { areaList } from '@vant/area-data';
import {mapState} from "vuex";
export default {
  name: "Address",
  data() {
    return {
      areaList,
      searchResult: [],
    };
  },
  methods: {
    onCancel(){
      this.$router.replace("/Address")
    },
    onSave() {

      this.$toast('save');
    },
    onDelete() {
      console.log(areaList)
      this.$toast('delete');
    },
    onChangeDetail(val) {
      if (val) {
        this.searchResult = [
          {
            name: this.Amap.addressComponent.district,
            address: this.Amap.addressComponent.street+this.Amap.addressComponent.township+this.Amap.addressComponent.streetNumber,
          },
        ];
      } else {
        this.searchResult = [];
      }
    },
  },
  computed:{
    ...mapState({
      Amap: (state) => state.Amap.all
    }),
  }
}
</script>

<style scoped>

</style>
